<template>
       <el-card class="box-card" shadow="never">
       <el-row style="text-align: center;">
               <img style="height:50px;auto" src="https://yilupingan.xcxweshine.com/static/image/admin_logo.png"></img>
               <span style="font-size:25px;padding-left:0px;position:relative;top:-10px;">一禄平安人保轮胎后台管理系统</span>
       </el-row>
       <div class="app-container">
          <el-row>
            <el-col>
              <div class="out-border">
                <div class="layout-title">数据总览</div>
                <div>
                  <el-row>
                      <el-col :span="6">
                        <div class="total-frame">
                          <img :src="img_home_total_user" class="total-icon">
                            <div class="total-title">客户总数</div>
                            <div class="total-value">{{total_count.customer_total_count}}</div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="total-frame">
                          <img :src="total_staff" class="total-icon">
                          <div class="total-title">理赔人员总数</div>
                          <div class="total-value">{{total_count.staff_total_count}}</div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="total-frame">
                          <img :src="total_shop" class="total-icon">
                          <div class="total-title">门店总数</div>
                          <div class="total-value">{{total_count.shop_total_count}}</div>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="total-frame">
                          <img :src="total_safe" class="total-icon">
                          <div class="total-title">投保总数</div>
                          <div class="total-value">{{total_count.safe_total_count}}</div>
                        </div>
                      </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
          <!-- 下面是echarts -->
          <el-row style="margin-top:20px;">
              <el-col :span="11" style="border: 1px solid #DCDFE6;box-shadow: 5px 5px 5px 0 rgb(0 0 0 / 5%);" >
                <LineChart :chart_style="line_style" style="margin-top:10px"></LineChart>
              </el-col>
              <el-col :span="2">
                <div style="width:100%;height:100%">&nbsp;</div>
              </el-col>
              <el-col :span="11" style="border: 1px solid #DCDFE6;box-shadow: 5px 5px 5px 0 rgb(0 0 0 / 5%);">
                <PieChart :chart_style="pie_style" style="margin-top:10px"></PieChart>
              </el-col>
          </el-row>

          <el-row style="margin-top:20px;">
            <el-col :span="24" style="border: 1px solid #DCDFE6;box-shadow: 5px 5px 5px 0 rgb(0 0 0 / 5%);">
              <BarChart :chart_style="bar_style" style="margin-top:10px"></BarChart>
            </el-col>
          </el-row>
        </div>
       </el-card>
</template>

<script>
    import img_home_total_user from '@/assets/image/img_home_total_user.png'
    import total_staff from '@/assets/image/total_staff.png'
    import total_shop from '@/assets/image/total_shop.png'
    import total_safe from '@/assets/image/total_safe.png'
    import PieChart from '@/components/echarts/PieChart.vue'
    import LineChart from '@/components/echarts/LineChart.vue'
    import BarChart from '@/components/echarts/BarChart.vue'
    import { getHomeData } from '@/api/home.js'
    export default {
        name: 'Home',
        components:{ PieChart,LineChart,BarChart },
        data(){
            return {
                img_home_total_user,
                total_staff,
                total_shop,
                total_safe,
                pie_style:'height:300px',
                line_style:'height:300px',
                bar_style:'height:400px',
                total_count:{
                    customer_total_count:0,
                    shop_total_count:0,
                    staff_total_count:0,
                    safe_total_count:0
                }
            }
        },
        created() {
          let that=this;
          getHomeData({type:'total'}).then(function(response){
              if(response.data.code==1){
                  that.total_count.customer_total_count=response.data.info.customer_total_count;
                  that.total_count.shop_total_count=response.data.info.shop_total_count;
                  that.total_count.staff_total_count=response.data.info.staff_total_count;
                  that.total_count.safe_total_count=response.data.info.safe_total_count;
              }
          })
        }
    }
</script>

<style>
  .app-container {
    margin-top: 20px;
    margin-left: 120px;
    margin-right: 120px;
    height:100%;
  }
  .out-border{
    box-shadow: 5px 5px 5px 0 rgb(0 0 0 / 5%);
    border: 1px solid #DCDFE6;
  }

.layout-title{
   color: #606266;
   padding: 15px 20px;
   background: #F2F6FC;
   font-weight: bold;
}

.total-frame{
  padding: 20px;
  height:60px;
}
 .total-icon {
   margin-left:20px;
   width: 60px;
   height: 60px;
  }
.total-title{
  position: relative;
  font-size: 16px;
  color: #909399;
  left: 90px;
   top: -50px;
}

.total-value{
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 90px;
  top: -40px;
}
</style>
